<template>
  <div class="table">
    <div class="headerBtn">
      <a-form-model layout="inline" :model="pageParams">
      
          <a-form-model-item label="试剂盒：">
          <a-select
            v-model="pageParams.kitName"
            placeholder="请选择试剂盒"
            style="width: 200px"
          >
            <a-select-option :value="item" v-for="item in kitNameList" :key="item">{{item}}</a-select-option>           
     
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="组分数：">
          <a-select
            v-model="pageParams.comNumber"
            placeholder="请选择组分数"
            style="width: 200px"
          >
            <a-select-option value="0">未知</a-select-option>           
            <a-select-option value="2">2人份</a-select-option>
            <a-select-option value="3">3人份</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="采样类型：">
          <a-select
            v-model="pageParams.samplingType"
            placeholder="请选择采样类型"
            style="width: 200px"
          >
            <a-select-option
              v-for="item in samplingTypeList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="queryList">查询</a-button>
          <a-button type="primary" @click="exportList">导出</a-button>
        </a-form-model-item>
      </a-form-model>
      <div class="fc" style="margin-right: 40px">
        <a-button type="primary" @click="add">新增</a-button>
        <a-button type="primary" @click="importTemplate">导入</a-button>
      </div>
    </div>
    <a-table
      :columns="columnsList.columns"
      :data-source="columnsList.datatable"
      :pagination="false"
      :loading="loading"
      :scroll="{ x: 1250 }"
    >
      <span slot="name" slot-scope="text">{{ text }}</span>
      <span slot="operation" slot-scope="text, record">
        <a-button type="primary" @click="lookInfo(record.kitId)" size="small"
          >详情</a-button
        >
        <a-button type="primary" @click="edit(record, text)" size="small"
          >编辑</a-button
        >
        <a-popconfirm
          title="确定要删除吗？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="del(record.kitId)"
        >
          <a href="#"> <a-button type="danger" size="small">删除</a-button></a>
        </a-popconfirm>
      </span>
    </a-table>
    <div class="pagination">
      <a-pagination
        v-model="pageParams.pageNum"
        :total="total"
        show-less-items
        @change="PageNumChange"
      />
    </div>

    <!-- 导入 -->
    <a-modal
      title="导入"
      :visible="visibleImport"
      :footer="null"
      @cancel="cancel"
      width="390px"
    >
      <div >
        <div class="fb fc">
          <div class="temDown">
            模板下载<a-icon
              type="vertical-align-bottom"
              @click="downloadFile"
            />
          </div>
          <div>
          <a-upload name="file" action="#" :customRequest="customRequestFun">
            <a-button type="primary" :loading="loading"> 导入 </a-button>
          </a-upload>
          </div>
        </div>
        <div style="margin: 20px 0; font-size: 12px; color: red">
          提示：请先下载模板，并按照模板填写数据，填写完整后再导入
        </div>
      </div>
    </a-modal>
    <!-- 新增 -->
    <addModel
      :addModel="addModel"
      @close="close"
      v-if="addModel.open"
      @refresh="refresh"
    ></addModel>
  </div>
</template>

<script>
import { dataSource as ds } from "@/services";
import { queryKitNameList } from "@/services/dataApi";
import addModel from "./compontens/addModel.vue";
export default {
  name: "Table",
  components: {
    addModel,
  },
  data() {
    return {
      addModel: {
        open: false,
        title: "新增",
        kitId: null,
      },
      kitNameList:[],
      loading: false,

      total: 0,
      headers: "导出",
      pageParams: {
        comNumber: undefined,
        kitName: undefined,
        pageNum: 1,
        pageSize: 10,
        samplingType: undefined,
      },

      columnsList: {
        columns: [
          {
            title: "序号",
            dataIndex: "name",
            customRender: function (text, record, index) {
              return parseInt(index) + 1;
            },
            align: "center",
            width: 100,
          },
          {
            title: "试剂盒",
            dataIndex: "kitName",
            key: "kitName",
            align: "center",
            width: 200,
          },
          {
            title: "组分数",
            dataIndex: "comNumber",
            customRender(_) {
              return ["未知", "1人份", "2人份", "3人份"][_ !== null ? _ : 0];
            },
            align: "center",
            width: 200,
          },
          {
            title: "采样类型",
            dataIndex: "samplingType",
            customRender(_) {
              return [
                "未知",
                "血斑",
                "唾液斑",
                "汗斑",
                "精斑",
                "毛发",
                "烟蒂",
                "骨骼",
                "牙齿",
                "脱落上皮细胞",
                "其他",
              ][_ !== null ? _ : 10];
            },
            align: "center",
            width: 100,
          },
          {
            title: "来源",
            dataIndex: "source",
            key: "source",
            align: "center",
            width: 200,
          },
          {
            title: "创建人",
            dataIndex: "createdBy",
            key: "createdBy",
            align: "center",
            width: 100,
          },
          {
            title: "创建时间",
            dataIndex: "createdTime",
            key: "createdTime",
            align: "center",
            width: 200,
          },
          {
            title: "操作",
            dataIndex: "operation",
            scopedSlots: { customRender: "operation" },
            align: "center",
            fixed: "right",
            width: 250,
          },
        ],
        datatable: [],
      },
      samplingTypeList: [
        { label: "血斑", value: 1 },
        { label: "唾液斑", value: 2 },
        { label: "汗斑", value: 3 },
        { label: "精斑", value: 4 },
        { label: "毛发", value: 5 },
        { label: "烟蒂", value: 6 },
        { label: "骨骼", value: 7 },
        { label: "牙齿", value: 8 },
        { label: "脱落上皮细胞", value: 9 },
        { label: "其他", value: 10 },
      ],
      modalTitle: "",
      modalVisible: false,
      confirmLoading: false,
      visibleImport: false,

      dataSource: [],
      conditions: {},
    };
  },
  created() {
    this.getTableList();
    this.queryKitNameList()
  },
  methods: {
    downloadFile() {
      let a = document.createElement("a");
      a.href = "./STR数据信息表.xlsx";
      a.download = "文件模板.xlsx";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    // 关闭弹框
    close() {
      this.addModel.open = false;
      this.addModel.kitId = null;
    },
    //刷新
    refresh() {
      this.getTableList();
    },
    queryKitNameList(){
      queryKitNameList().then(res=>{
        if(res.retcode == "success"){
          this.kitNameList= new Set( res.data)
        }
      })
    },

    getTableList() {
      this.loading = true;
      ds.queryKitInfoList(this.pageParams).then((res) => {
        if (res.retcode == "success") {
          this.loading = false;
          this.columnsList.datatable = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    // 查询
    queryList() {
      this.getTableList();
    },
    // 导出
    exportList() {
      ds.exportKitInfo(this.pageParams).then((res) => {
        console.log(res);
        if (res) {
          let filename = "基因数据";
          const blob = new Blob([res], { type: "application/vnd.ms-excel" });
          const link = document.createElement("a");
          link.href = URL.createObjectURL(blob);
          link.download = filename;
          document.body.appendChild(link);
          link.click();
          window.setTimeout(function () {
            URL.revokeObjectURL(blob);
            document.body.removeChild(link);
          }, 1000);
        }
      });
    },
    // 删除
    del(kitId) {
      ds.deleteKitInfo({ kitId: kitId }).then((res) => {
        if (res.retcode == "success") {
          this.$message.success(res.data);
          this.getTableList();
        }
      });
    },
    // 新增
    add() {
      this.addModel.open = true;
      this.addModel.title = "新增";
    },
    // 模板导入
    importTemplate() {
      this.visibleImport = true;
    },
    customRequestFun(info) {
      this.loading = true;
      console.log(info.file, "1111");
      const form = new FormData();
      form.append("file", info.file);
      ds.importKitInfo(form).then((res) => {
        if (res.retcode == "success") {
          this.loading = false;
          this.$message.success("导入成功");
          this.visibleImport = false;
        }else{
          this.loading=false
        }
      }).catch(()=>{
          this.loading=false
      });
    },

    cancel() {
      this.visibleImport = false;
    },
    //编辑
    edit(row) {
      this.addModel.kitId = row.kitId;
      this.addModel.open = true;
      this.addModel.title = "编辑";
      console.log(this.addModel, "zzz");
    },
    //  查看详情
    lookInfo(kitId) {
      this.$router.push({
        path: "/spread/surelyInfo",
        query: { kitId: kitId },
      });
    },
    // 改变页码
    PageNumChange(page, pageSize) {
      this.pageParams.pageNum = page;
      this.pageParams.pageSize = pageSize;
      this.getTableList();
    },
  },
};
</script>

<style scoped lang="less">
:deep(.ant-select-selection__placeholder){
  display:block !important;
}
:deep(.ant-form-item-control-wrapper) {
  width: 200px !important;
}

.table {
  background-color: @base-bg-color;
  padding: 24px;
}

.headerBtn {
  display: flex;
  justify-content: space-between;
}

button {
  margin-right: 10px;
}

.pagination {
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.temDown {
  font-size: 16px;
  color: #719dff;
  cursor: pointer;
}
.jyz li {
  display: flex;
  list-style: none;
}
.db {
  display: block;
}
</style>
